<template>
  <Page name="账单详情">
    <ui-loading v-if="initLoading" class="page-init-loading">
      <div slot="content"></div>
    </ui-loading>
    <div class="bill-details">
      <div class="header">
        <h4>
          <img :src="data.logo" alt="">
          <span>{{data.to_name}}</span>
        </h4>
        <p class="amount">
          <span v-for="(item,idx) in data.amount" :key="idx">{{item}}</span>
        </p>
        <p class="status">{{data.status_str}}</p>
      </div>
      <ul class="list">
        <!-- 支付 -->
        <div v-if="data.type==1">
           <li v-if="data.desi_name!=''">
            <span>指定付款人</span>
            <span>{{data.desi_name}}</span>
          </li>
           <li v-if="data.pay_type_text!=''">
            <span>付款方式</span>
            <span>{{data.pay_type_text}}</span>
          </li>
          <li v-if="data.amount_group!=''">
            <span>资金扣款组合</span>
            <span>{{data.amount_group}}</span>
          </li>
          <li v-if="data.apply_name!=''">
            <span>代付人</span>
            <span>{{data.apply_name}}</span>
          </li>
          <li v-if="data.goods!=''">
            <span>商品说明</span>
            <span>{{data.goods}}</span>
          </li>
          <li v-if="data.addtime!=''">
            <span>创建时间</span>
            <span>{{data.addtime}}</span>
          </li>
          <li v-if="data.bill_id!=''">
            <span>交易号</span>
            <span>{{data.bill_id}}</span>
          </li>
          <li @click="goToOrder(data.order_id)">
            <span>商户订单号</span>
            <span>{{data.order_id}}<i class="arrow-right"></i></span>
          </li>
          <li v-if="data.refund_str!=''">
            <span>退款说明</span>
            <span>{{data.refund_str}}</span>
          </li>
          <li v-if="data.relate_bill.length!=0" @click="linkStatus=true">
            <span>关联记录</span>
            <span>查看<i class="arrow-right"></i></span>
          </li>
        </div>
        <!-- 支付end -->

        <!-- 充值 -->
        <div v-if="data.type==2">
          <p class="cancle_btn rt" v-if="data.status==0" @click="getPop">取消申请</p>
          <li v-if="data.status!=0">
            <span>实际充值金额</span>
            <span>{{data.real_amount}}</span>
          </li>
          <li v-if="data.status!=0">
            <span>实际入账金额</span>
            <span>{{data.income_amount}}</span>
          </li>
          <p class="line" v-if="data.status!=0"></p>
          <li>
            <span>充值方式</span>
            <span>{{data.pay_type_text}}</span>
          </li>
          <li>
            <span>充值状态</span>
            <span>{{data.other_str}}</span>
          </li>
          <li>
            <span>申请时间</span>
            <span>{{data.addtime}}</span>
          </li>
          <li v-if="data.recharge_time!=''">
            <span>完成时间</span>
            <span>{{data.recharge_time}}</span>
          </li>
          <li v-if="data.kf_name!=''">
            <span>客服受理人</span>
            <span>{{data.kf_name}}</span>
          </li>
          <li v-if="data.cw_name!=''">
            <span>财务受理人</span>
            <span>{{data.cw_name}}</span>
          </li>
          <li>
            <span>交易号</span>
            <span>{{data.bill_id}}</span>
          </li>
          <!-- 取消申请 -->
          <ui-popup :status="popup.status" @close="popupClose">
            <div class="popup-common exit-pop">
                <div class="exit-content">
                    <p> {{ popInfo.title }} </p>
                </div>
                <div class="footer">
                    <a href="javascript:;" @click="popupClose">取消</a>
                    <a href="javascript:;" @click="confirm('2')">确定</a>
                </div>
            </div>
          </ui-popup>
        </div>
        <!-- 充值end -->

        <!-- 转账 -->
        <div v-if="data.type==12">
          <li v-if="data.pay_type_text!=''">
            <span>付款方式</span>
            <span>{{data.pay_type_text }}</span>
          </li>
          <li v-if="data.amount_group!=''">
            <span>资金扣款组合</span>
            <span >{{data.amount_group}}</span>
          </li>
          <li v-if="data.remark!=''">
            <span>转账备注</span>
            <span>{{data.remark}}</span>
          </li>
          <li v-if="data.to_uid!=''">
            <span>对方户口号</span>
            <span >{{data.to_uid}}</span>
          </li>

          <li v-if="data.addtime!=''">
            <span>创建时间</span>
            <span>{{data.addtime}}</span>
          </li>

          <li v-if="data.bill_id!=''">
            <span>交易号</span>
            <span>{{data.bill_id}}</span>
          </li>
        </div>
        <!-- 转账end -->

        <!-- 预授权 -->

        <div v-if="data.type==6">
          <p class="cancle_btn rt" @click="getPopUnfrozen(6)" v-if="data.status==0">申请解冻</p>
          <li v-if="data.to_name!=''">
            <span>商家名称</span>
            <span>{{data.to_name}}</span>
          </li>
          <p class="line"></p>
          <li v-if="data.status_str!=''">
            <span>预授权状态</span>
            <span>{{data.other_str}}</span>
          </li>
          <li v-if="data.frozen_time!=''">
            <span>冻结时间</span>
            <span>{{data.frozen_time}}</span>
          </li>
          <li v-if="data.auto_frozen_time!=''">
            <span>自动解冻时间</span>
            <span>{{data.auto_frozen_time}}</span>
          </li>
          <li v-if="data.apply_unfrozen_time!=''">
            <span>申请解冻时间</span>
            <span>{{data.apply_unfrozen_time}}</span>
          </li>


          <li v-if="data.remark!=''">
            <span>备注</span>
            <span>{{data.remark}}</span>
          </li>
          <li>
            <span>交易号</span>
            <span>{{data.bill_id}}</span>
          </li>
         <ui-popup :status="popup.status" @close="popupClose">
            <div class="popup-common exit-pop unfrozen">
                <div class="exit-content">
                    <p> {{ popInfo.title }} </p>
                    <textarea v-model="popInfo.content" id="content" placeholder="请输入申请原因"></textarea>
                </div>
                <div class="footer">
                    <a href="javascript:;" @click="popupClose">取消</a>
                    <a href="javascript:;" @click="confirm(6)">确定</a>
                </div>
            </div>
          </ui-popup>
        </div>
        <!-- 预授权end -->

        <!-- 代付 -->
        <div v-if="data.type==100">
          <li v-if="data.refund_amount!=''">
            <span>实际退款金额</span>
            <span>{{data.refund_amount}}</span>
          </li>
          <li v-if="data.pay_type!=''">
            <span>付款方式</span>
            <span>{{data.pay_type_text}}</span>
          </li>
          <li>
            <span>资金扣除组合</span>
            <span ><span v-for="item in group">{{item}}</br></span></span>
          </li>

          <p class="line" ></p>
          <li>
            <span>商品说明</span>
            <span>{{data.goods}}</span>
          </li>
          <li>
            <span>代付备注</span>
            <span>{{data.remark}}</span>
          </li>
          <li v-if="data.apply_name!=''">
            <span>申请人</span>
            <span>{{data.apply_name}}</span>
          </li>
          <li>
            <span>创建时间</span>
            <span>{{data.addtime}}</span>
          </li>
          <li>
            <span>交易号</span>
            <span>{{data.bill_id}}</span>
          </li>
          <li v-if="data.refund_source!=''">
            <span>退款发起方</span>
            <span>{{data.refund_source}}</span>
          </li>
          <li v-if="data.relate_bill.length!=0" @click="linkStatus=true">
            <span>关联记录</span>
            <span>查看<i class="arrow-right"></i></span>
          </li>

          <button class="pay-btn" v-if="data.status==0" @click="pay">慷慨付款</button>
        </div>
        <!-- 代付end-->

        <!-- 还款 -->
        <div v-if="data.type==4">
          <li v-if="data.pay_type!=''">
            <span>付款方式</span>
            <span>{{data.pay_type_text}}</span>
          </li>
          <li>
            <span>还款扣款组合</span>
            <span ><span v-for="item in group">{{item}}</br></span></span>
          </li>
          <p class="line"></p>
          <li>
            <span>还款状态</span>
            <span>{{data.other_str}}</span>
          </li>
          <li>
            <span>创建时间</span>
            <span>{{data.addtime}}</span>
          </li>
          <li>
            <span>交易号</span>
            <span>{{data.bill_id}}</span>
          </li>
        </div>
        <!-- 还款end-->

        <!-- 提现 -->
        <div v-if="data.type==3">
          <p class="cancle_btn rt" v-if="data.status==1" @click="getPop">取消申请</p>
          <li>
            <span>资金扣除组合</span>
            <span >{{data.amount_group}}</span>
          </li>
          <li >
            <span>提现方式</span>
            <span>{{data.pay_type_text}}</span>
          </li>
          <li v-if="data.pay_type_text=='银行卡'">
            <span>提现到</span>
            <span>{{data.remark}}</span>
          </li>
          <p class="line"></p>
          <li>
            <span>提现状态</span>
            <span>{{data.getout_status_str}}</span>
          </li>
          <li>
            <span>申请时间</span>
            <span>{{data.addtime}}</span>
          </li>
          <li v-if="data.kf_name!=''">
            <span>客服受理人</span>
            <span>{{data.kf_name}}</span>
          </li>
          <li v-if="data.cw_name!=''">
            <span>财务受理人</span>
            <span>{{data.cw_name}}</span>
          </li>
          <li>
            <span>交易号</span>
            <span>{{data.bill_id}}</span>
          </li>
          <!-- 取消申请 -->
          <ui-popup :status="popup.status" @close="popupClose">
            <div class="popup-common exit-pop">
                <div class="exit-content">
                    <p> {{ popInfo.title }} </p>
                </div>
                <div class="footer">
                    <a href="javascript:;" @click="popupClose">取消</a>
                    <a href="javascript:;" @click="confirm(3)">确定</a>
                </div>
            </div>
          </ui-popup>
        </div>
        <!-- 提现end-->

        <!-- 退款 -->
        <div v-if="data.type==9">
          <li v-if="data.refund_amount!=''">
            <span>实际退款金额</span>
            <span>{{data.refund_amount}}</span>
          </li>
          <li>
            <span>退款方式</span>
            <span>{{data.pay_type_text}}</span>
          </li>
          <li>
            <span>商品说明</span>
            <span>{{data.goods}}</span>
          </li>
          <li>
            <span>创建时间</span>
            <span>{{data.addtime}}</span>
          </li>
          <li>
            <span>交易号</span>
            <span>{{data.bill_id}}</span>
          </li>
          <li @click="goToOrder(data.order_id)">
            <span>商户订单号</span>
            <span>{{data.order_id}}<i class="arrow-right"></i></span>
          </li>
          <li v-if="data.refund_source!=''">
            <span>退款发起方</span>
            <span>{{data.refund_source}}</span>
          </li>

          <li v-if="data.relate_bill.length!=0" @click="linkStatus=true">
            <span>关联记录</span>
            <span>查看<i class="arrow-right"></i></span>
          </li>

        </div>
        <!-- 退款end-->


        <!-- 关联记录 -->
        <div class="tips" v-if="data.type==100">
          代付说明：</br>
          1.付款前请您务必和好友再次确认，避免遇到诈骗行为；</br>
          2.如果发生退款，已支付的金额将原路退回付款人；</br>
        </div>


        <!-- 关联账号 -->
        <div class="pup-common" v-if="linkStatus" >
          <div class="mask"  @click="linkStatus=false"></div>
          <div class="con">
            <header>
              <span>全部关联记录</span>
              <span @click="linkStatus=false">取消</span>
            </header>
            <ul>
              <li v-for="(item,index) in data.relate_bill"  @click="look(item,index)">
                <div class="text"><i v-if="item.is_show==0">当前</i>{{item.remark}}</div>
                <div class="amount-group">
                  <span v-for="(a,i) in item.amount.slice(0,2)" :key="i">{{a}}  </span>
                  <span v-if="item.amount.length >2">...</span>
                </div>
                <i class="arrow-right" v-if="item.is_show==1"></i>
              </li>
            </ul>
          </div>
        </div>
      </ul>
    </div>
  </Page>
</template>

<script>
import Page from '~/components/page';
import UILoading from "~/components/loading";
import popup from "~/components/common/popup";
export default {
  components: {
    Page,
    [UILoading.name]: UILoading,
    [popup.name]: popup,
  },
  data() {
    return {
      initLoading: true,
      linkStatus:false,
      popInfo: {
          title: "",
          content: ""
      },
      popup: {
          status: false
      },
      data: {},
      group:[]
    }
  },
  mounted(){
    (async () => {
      await this.getDate(this.$utils.getUrlKey("bill_id"));
    })();
    //this.data.amount = parseInt(this.data.amount);
  },
  /* filters:{
    group(str){
      var tem = str.split(/[\n,]/g);
      let s = "";
      for(var i=0;i<tem.length;i++){
        s += '<span>'+tem[i]+'</span></br>'
      }
      return s;
    }
  }, */
  methods: {
    async getDate(bill_id) {
      let { data: rs } = await this.$axios.post('?ct=api&ac=bill_info',{
        bill_id:bill_id
      })
      if (rs.code == 0) {
        rs.data.amount = rs.data.amount.split(/[\r\n]/);
        this.data = rs.data;
        this.initLoading = false;
        this.group = rs.data.amount_group.split(/[\r\n]/);

        //格式化relate_bill的amout
        this.data.relate_bill && this.data.relate_bill.forEach(item=>{
          item.amount = item.amount.split(/[\r\n]/);
        })
      } else {
        this.$toast(rs.msg);
        window.history.go(-1);
        this.initLoading = false;
      }
    },
    getPop () {
      this.popInfo.title = "确认取消申请？";
      this.popup.status = true;
    },
    getPopUnfrozen(){
      this.popInfo.title = "确认申请解冻？";
      this.popup.status = true;
      setTimeout(()=>{
        document.getElementById("content").focus();
      },500)
    },
    popupClose () {
      this.popup.status = false;
    },
    confirm (n) {
      if(n==2){
        this.cancelRecharge();
      }else if(n==3){
        this.cancelGetout();
      }else if(n==6){
        this.cancelUnfrozen();
      }else{

      }

      this.popup.status = false;
    },
    //充值取消申请
    async cancelRecharge() {
      let { data: rs } = await this.$axios.post('?ct=api&ac=recharge_cancel',{
        bill_id:this.data.order_id
      })
      if (rs.code > 0) {
        this.$toast(rs.msg);
        window.history.go(-1);
      } else {
        this.$toast(rs.msg);
        window.history.go(-1);
      }
    },
    //充值提现申请
    async cancelGetout() {
      let { data: rs } = await this.$axios.post('?ct=api&ac=getout_cancel',{
        bill_id:this.data.order_id
      })
      if (rs.code > 0) {
        this.$toast(rs.msg);
        window.history.go(-1);
      } else {
        this.$toast(rs.msg);
        window.history.go(-1);
      }
    },
    //申请解冻
    async cancelUnfrozen() {
      let { data: rs } = await this.$axios.post('?ct=api&ac=apply_unfrozen',{
        bill_id:this.data.order_id,
        reason:this.popInfo.content
      })
      if (rs.code > 0) {
        this.$toast(rs.msg);
        window.history.go(-1);
      } else {
        this.$toast(rs.msg);
        window.history.go(-1);
      }
    },
    //慷慨付款
    pay(){
      this.$router.push({path:"/bill/confirm",query:{
          id:this.data.order_id,
          shop_id:this.data.shop_id,
          amount:this.data.amount,
          payer_uid:this.data.pay_uid
        }
      })
    },
    //查看关联记录
    look(item){
      if(item.is_show!=0){
        this.linkStatus=false;
        this.getDate(item.bill_id);
      }
    },
    //查看订单信息
    goToOrder(order_id){
      this.$router.push({path:'/order/order-details',query:{'order_id':order_id}})
    }
  }
}
</script>

<style lang="less" scoped>
.bill-details{
  .header{
    padding:50px 0;
    text-align: center;
    background: #fff;
    h4{
      font-weight: normal;
      font-size:30px;
      margin-bottom:50px;
      img{
        width:48px;
        height:48px;
        border-radius: 48px;
        margin-right:20px;
        vertical-align: middle;
      }
    }
    p.amount{
      font-size:60px;
      font-weight: 600;
      span{
        display: block;
      }
    }
    p.status{
      font-size:28px;
      color:#d39b00;
      margin-top:30px;
    }
  }
  .list{
    li{
      background: #fff;
      display: -webkit-flex; /* Safari */
      display: flex;
      justify-content:space-between;
      align-items: center;
      padding:30px;
      font-size:30px;
      color:#666;
      span{
        // width:45%;
        &:first-child {
          flex:1;
        }
        .text-ellipsis();
      }
      span:last-child{
        color:#292929;
        text-align: right;
        // width:55%;
        i{
          background: url("~assets/img/jiantou_right.png") no-repeat left center;
          width:10px;
          height:18px;
          display: inline-block;
          background-size:100%;
          margin-left:10px;
        }
      }
    }
    p.line{
      width:720px;
      height:1.1px;
      background: #ededed;
      margin-left: 30px;
    }
    .pay-btn{
      position: fixed;
      bottom:0;
      left:0;
      width:100%;
      line-height: 100px;
      background: #f05521;
      font-size:36px;
      text-align: center;
      border:0;
      color:#fff;
    }
  }
  .tips{
    padding:20px 30px;
    color:#999;
    line-height: 40px;
  }
  .rt{
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 99999;
    font-size: 30px;
    color: #2086f9;

  }
}

.popup-common {
    position: absolute;
    left: 11%;
    background: #fff;
    z-index: 999;
    border-radius: 10px;
}

.exit-pop {
  top: 40%;
  width: 600px;
  height: 360px;
  &.unfrozen{
    height:400px;
    p{
      margin-top:30px !important;
    }
    textarea{
      width:80%;
      padding:20px;
      height:100px;
      border:1px solid #ededed;
      margin-top:20px;
      box-shadow: none;
    }
  }
  .exit-content {
    margin-top: 60px;
    text-align: center;
    p {
        margin-top: 40px;
        font-size: 36px;
        color: #282828;
    }
  }
  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    a {
      display: inline-block;
      width: 50%;
      padding: 30px 0;
      text-align: center;
      font-size: 36px;
      border-top: 1px solid #e2e2e2;
      color: #2086f9;
      &:first-child {
        border-right: 1px solid #e2e2e2;
      }
    }
  }
}


 .pup-common{
    position: fixed;
    top: 88px;
    left: 0;
    right: 0;
    bottom: 0;
    .mask{
      background: rgba(0,0,0,0.3);
      width:100%;
      height:100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      position: absolute;
    }
    .con{
      position: absolute;
      bottom:0;
      background: #fff;
      width:100%;
      max-height: 100%;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      ul{
        // padding-bottom:100px;
        li{
          padding:0 30px;
          display: flex;
          align-items: center;
          min-height: 100px;
          border-bottom:1px solid #ededed;
          &:last-child{
            border-bottom:0;
          }
          .amount-group {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: center;
            line-height: 1;
          }
          i.arrow-right {
              margin-left:20px;
              background: url("~assets/img/jiantou_right.png") no-repeat left center;
              width:10px;
              height:18px;
              display: inline-block;
              background-size:100%;
              margin-left:10px;
            }
          .text{
            flex:1;
            .text-ellipsis();
            i{
              font-size:20px;
              padding:3px 8px;
              background: #2086f9;
              border-radius: 6px;
              color:#fff;
              margin-right:10px;
            }
          }
        }

      }
      header{
        position: sticky;
        top:0;
        background-color:#fff;
        border-bottom:1px solid #ededed;
        font-size:28px;
        color:#666;
        padding:0 30px;
        line-height: 80px;
        span:last-child{
          float: right;
          color:#2086f9;

        }
      }
    }
  }
</style>
